<template>
  <div class="list">
    <Item :removeItem="removeItem" v-for="todo in todos" :key="todo.id" v-bind="todo"/>
  </div>
</template>

<script>
import Item from './item';

export default {
  name: 'list',
  props: {
    todos: {
      type: Array,
      default: () => [],
    },
    removeItem: Function,
  },
  components: {
    Item,
  },
};
</script>

<style>
.fold-enter-active {
  animation-name: fold-in;
  animation-duration: .5s;
}

.fold-leave-active {
  animation-name: fold-out;
  animation-duration: .5s;
}

@keyframes fold-in {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  50% {
    transform: translate3d(0, 50%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fold-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, 50%, 0);
  }
  100% {
    transform: translate3d(0, 100%, 0);
  }
}
</style>
